<template>
  <div class="box">
    <input type="text" v-model="text" placeholder="请输入你的任务名称" class="input" @keyup.enter="addTodoList">
  </div>
</template>

<script>
import {nanoid} from "nanoid";
export default {
   data(){
     return{
        text:''
     }
   },
   methods:{
     //添加每一项
     addTodoList(){
       if(!this.text.trim()) return alert('不能为空')
        const workObj = {
            id:nanoid(),
            work:this.text,
            done:false
        }
        //通过子组件获取到数据传给父组件实现添加
        this.$emit('sendTodoList',workObj)
        this.text= ''
     }
   }
}
</script>

<style scoped >
.box{
  margin-bottom: 15px;
}
.input{
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  outline: none;
  border: 1px solid #CDE6F9FF;
  box-shadow: 1px 1px 15px #CDE6F9FF;
}
input::placeholder{
  font-size: 12px;
  color: #858A8EFF;
}
</style>
